<template>
  <div>
    <vTablePage
    :pageConfig="pageConfig"
    :tableData="tableData"
    :total="total"
    @changeEdit="changeEditType"
    @changePageNo="changePageNo"
    >
    </vTablePage>
    <!-- 删除 -->
    <el-dialog
      v-model="delDialogVisible"
      title="删除"
      width="500"
    >
      <span>确定删除这条数据吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="delDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleClose">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 详情 -->
    <el-drawer v-model="drawer">
      <template #header>
        <h4>查看商品的详情</h4>
      </template>
      <template #default>
        <el-row style="margin: 10px 0">
          <el-col :span="6">名称</el-col>
          <el-col :span="18">{{ skuInfo.skuName }}</el-col>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :span="6">描述</el-col>
          <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :span="6">价格</el-col>
          <el-col :span="18">{{ skuInfo.price }}</el-col>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :span="6">平台属性</el-col>
          <el-col :span="18">
            <el-tag
              style="margin: 5px"
              v-for="item in skuInfo.skuAttrValueList"
              :key="item.id"
            >
              {{ item.valueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :span="6">销售属性</el-col>
          <el-col :span="18">
            <el-tag
              style="margin: 5px"
              v-for="item in skuInfo.skuSaleAttrValueList"
              :key="item.id"
            >
              {{ item.saleAttrValueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :span="6">商品图片</el-col>
          <el-col :span="18">
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item
                v-for="item in skuInfo.skuImageList"
                :key="item.id"
              >
                <img
                  :src="item.imgUrl"
                  alt=""
                  style="width: 100%; height: 100%"
                />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </template>
    </el-drawer>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import vTablePage from '../../components/tablePage/index.vue'
import {
  reqSkuList,
  reqSaleSku,
  reqCancelSale,
  reqSkuInfo,
  reqRemoveSku,
} from '@/api/product/sku'
import type {
  SkuData,
  SkuResponseData,
  SkuInfoData,
} from '@/api/product/sku/type'

// 表格配置
const total = ref<number>(0)
const pageNo = ref<number>(1)
const pageConfig = reactive({
  // 是否展示头部
  showHeader: false,
  // 是否展示索引or多选
  showIndex: true,
  showSelection: false,
  // 列表
  columns:[
    {
      label: '名称',
      prop: 'skuName'
    },
    {
      label: '描述',
      prop: 'skuDesc',
    },
    {
      label: '图片',
      prop: 'skuDefaultImg',
      isPic: true // 图片
    },
    {
      label: '重量(g)',
      prop: 'weight',
    },
    {
      label: '价格(元)',
      prop: 'price',
    },
    {
      label: '操作',
      prop: 'operation',
      isEdit: true,
      isFixed: true
    }
  ],
  // 操作列
  editBtns:[
    {
      text: '编辑',
      type: 'edit',
      icon: 'Edit'
    },
    {
      text: '删除',
      type: 'delete',
      icon: 'Delete'
    },
    {
      text: '详情',
      type: 'detail',
      icon: 'View'
    },
    {
      text: '上架',
      type: 'onSale',
      icon: 'Top',
      display: row => {
        return row.isSale === 1
      }
    },
    {
      text: '下架',
      type: 'offSale',
      icon: 'Bottom',
      display: row => {
        return row.isSale === 0
      }
    }
  ]
})
const tableData = ref([])
let skuInfo = reactive({})
// 弹框
const delDialogVisible = ref<boolean>(false)
const drawer = ref<boolean>(false)
// 编辑类型
const changeEditType = (val: any) => {
  const { item, row } = val
  if (item.type === 'detail') {
    changeDetail(row)
  } else if (item.type === 'edit') {
    changeEdit(row)
  } else if (item.type === 'delete') {
    changeDelete(row)
  } else if (item.type === 'onSale') {
    changeOnSale(row)
  } else if (item.type === 'offSale') {
    changeOffSale(row)
  }
}
// 分页
const changePageNo = (row: any) => {
  pageNo.value = row
  getList(pageNo.value)
}
// 详情
const changeDetail = async(row: any) => {
  drawer.value = true
  let res: SkuInfoData = await reqSkuInfo(row.id as number)
  Object.assign(skuInfo, res.data)
}
// 上架
const changeOnSale = async(row: any) => {
  try {
    const res = await reqSaleSku(row.id as number)
    if ( res.code === 200) {
      ElMessage({
        type: 'success',
        message: '上架成功',
      })
      getList()
    } else {
      ElMessage({
        type: 'error',
        message: '上架失败',
      })
    }
  } catch (error) {
    console.log(error);
  }
}
// 下架
const changeOffSale = async(row: any) => {
  try {
    const res = await reqCancelSale(row.id as number)
    if( res.code === 200) {
      ElMessage({
        type: 'success',
        message: '下架成功',
      })
      getList()
    } else {
      ElMessage({
        type: 'error',
        message: '下架失败',
      })
    }
  } catch (error) {
    console.log(error);
  }

}
// 编辑
const changeEdit = (row: any) => {
  ElMessage({ type: 'info', message: '程序员在努力的更新中...' })
}
// 删除
const uid = ref<number>(0)
const changeDelete = async(row: any) => {
  uid.value = row.id
  delDialogVisible.value = true  
}
// 确定删除
const handleClose = async() => {
  try {
    let res = await reqRemoveSku(uid.value)
    if (res.code === 200) {
      ElMessage({
        type: 'success',
        message: '删除品牌成功',
      })
      delDialogVisible.value = false
      //再次获取已有的品牌数据
      getList()
    } else {
      ElMessage({
        type: 'error',
        message: '删除品牌失败',
      })
    }
  } catch (error) {
    console.log(error);
    
  }
}

// 获取列表
const getList = async() => {
  const res = await reqSkuList(pageNo.value)
  total.value = res.data.total
  tableData.value = res.data.records
}
onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">

</style>